<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- html <head>标签部分  -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>DIDIFight</title>
	<#include "common/header.ftl"/>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.twbsPagination.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //点击分组
            $(".group_item").click(function () {
                var id = $(this).data("dataid");
                $("#parentId").val(id);
                $("#searchForm").submit();
            })
            //分组active
            var parentId = "${qo.parentId!''}";
            if (parentId) {
                $(".group_item[data-dataid=" + parentId + "]").closest("li").addClass("active");
            }
            //点击新增按钮
            $("#addMenuItemBtn").click(function () {
                if (parentId == -1) {
                    $.messager.popup("请先选择具体分组");
                    return;
                }
                $("#editForm").clearForm(true);
                $("#menuItemModal").modal("show");
            })
            //点击保存按钮
            $("#saveBtn").click(function () {
                $("#editFormParentId").val(parentId);
                $("#editForm").ajaxSubmit({
                    datatype: "json",
                    success: function (data) {
                        if (data.success) {
                            $("#searchForm").submit();
                        } else {
                            $.messager.popup(data.msg);
                        }
                    }
                })
            });
            //点击修改按钮
            $(".edit_Btn").click(function () {
                var data = $(this).data("json");
                console.log(data);
                $("#editForm").clearForm(true);
                $("#menuId").val(data.id);
                $("#editFormParentId").val(data.parentId);
                $("#name").val(data.name);
                $("#key").val(data.key);
                $("#type").val(data.type);
                $("#url").val(data.url);
                $("#menuItemModal").modal("show");
            })
            //点击更新公众号菜单按钮
            $("#updateRemoteMenuBtn").click(function () {
                $.get("/menuRemoteUpdate", function (data) {
                    if (data.errmsg == "ok") {
                        $.messager.popup("更新成功");
                        location.reload();
                    } else {
                        $.messager.popup(data.errcode + ":" + data.errmsg);
                    }
                }, "json")
            })
        });
    </script>
</head>
<body>
<div class="container">
		<#include "common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
				<#assign currentMenu="menuItem" />
				<#include "common/menu.ftl" />
        </div>
        <div class="col-sm-9">
            <div class="page-header">
                <center>
                    <h3>菜单明细管理</h3>
                </center>
            </div>
            <div class="col-sm-12">
                <!-- 提交分页的表单 -->
                <form id="searchForm" class="form-inline" method="post" action="/menuItem">
                    <input type="hidden" id="parentId" name="parentId" value='${(qo.parentId)!""}'/>
                    <div class="form-group">
                        <button id="query" class="btn btn-success"><i class="icon-search"></i> 查询</button>
                        <a href="javascript:void(-1);" class="btn btn-success" id="addMenuItemBtn">添加菜单明细</a>
                        <a href="javascript:void(-1);" class="btn btn-success" id="updateRemoteMenuBtn">更新公众号菜单</a>
                    </div>
                </form>
                <div class="row" style="margin-top:20px;">
                    <div class="col-sm-3">
                        <ul id="menu" class="list-group">
                            <li class="list-group-item">
                                <a href="#" data-toggle="collapse"
                                   data-target="#menu_group_detail"><span>菜单分组</span></a>
                                <ul class="in" id="menu_group_detail">
                                    </li>
										<#list menuGroups as vo><!-- id="pg_${vo.id}" -->
										   <li><a class="group_item" data-dataid="${vo.id}"
                                                  href="javascript:;"><span>${vo.name}</span></a></li>
                                </#list>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-9">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>NAME</th>
                                <th>KEY</th>
                                <th>TYPE</th>
                                <th>URL</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
								<#list subMenuList as vo>
                                <tr>
                                    <td>${vo.name}</td>
                                    <td>${vo.key!""}</td>
                                    <td>${vo.type!""}</td>
                                    <td>${vo.url!""}</td>
                                    <td>
                                        <a href="javascript:void(-1);" class="edit_Btn"
                                           data-json='${vo.jsonString}'>修改</a> &nbsp;
                                    </td>
                                </tr>
                                </#list>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="menuItemModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑/增加</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" class="form-horizontal" method="post" action="menuLocalUpdate"
                      style="margin: -3px 118px">
                    <input id="menuId" type="hidden" name="id" value=""/>
                    <input type="hidden" id="editFormParentId" name="parentId" value=""/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">NAME</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="name" name="name" placeholder="NAME">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">KEY</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="key" name="key" placeholder="KEY">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">TYPE</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="type" name="type" placeholder="TYPE">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">URL</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="url" name="url" placeholder="URL">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="btn btn-success" id="saveBtn" aria-hidden="true">保存</a>
                <a href="javascript:void(0);" class="btn" data-dismiss="modal" aria-hidden="true">关闭</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>